
function getTimeFromIndex(index)
{
	var result = "";
	var tindex = index + 570;
	var h = 0;
	var m = 0;
	tindex = index  > 119? tindex + 90 : tindex;
	h =parseInt( tindex / 60);
	m = tindex % 60;
	result = h < 10?("0" + h) :("" + h);
	result +=":";
	result += m < 10?"0"+m:""+m;
	return result;
	 
}

function getHKTimeFromIndex(index)
{
	var result = "";
	var tindex = index + 570;
	var h = 0;
	var m = 0;
	tindex = index  > 149? tindex + 60 : tindex;
	h =parseInt( tindex / 60);
	m = tindex % 60;
	result = h < 10?("0" + h) :("" + h);
	result +=":";
	result += m < 10?"0"+m:""+m;
	return result;
	 
}

function TimeLineInfo()
{
		this.DateTime="";
		this.Price = 0.0;
		this.Amount = 0.0;
		this.Volume = 0.0;
		this.AveragePrice = 0.0;
		this.RiseRate = 0.0
		this.UpDown = 0.0
		this.RG = 0;
}

function TimeLineInterface(linectx)
{
	var _self = this;
	var Context = linectx;
	var TIME_TAG_HEIGHT = 25;
	
	var COLOR_BORDER="#cccccc";		
	var ClientWidth = 0;
	var ClientHeight = 0;
	var LineWidth = 0;
	var LineHeight = 0;
	var VolumeWidth = 0.0;
	var VolumeHeight = 0;
	var DecimalPlace = 2;
	var DataList = null;
	var COLOR_LINE = "#155A9B";
	var COLOR_AVERAGE_LINE = "#CE2927";
	var COLOR_VOLUME = "#9F3738";
	var COLOR_RISE = "#9F3738";
	var COLOR_DOWN = "#188A2A";
	var COLOR_SAME = "#222222";
	var COLOR_BACKGROUND = "#aaaaaa";
	var COLOR_CROSSOR_LINE = "#BE1C1A";
	var MIN_INFO_WIDTH = 50;
	var MIN_INFO_HEIGHT = 60;
	var TAG_BORDER_SPACE = 5;
	var FONTS = 20;
	var MaxPrice = 0, MinPrice = 0, MaxCord = 0;
	var MaxVolume = 0.0;
	var PreClose = 0;
	var Open = 0;
	var VolumeSplite = 1.0;

	var Tag_Border_Width = 0;
	var SelectX = 0;
	var SelectY = 0;
	var Selected = false;
	this.Status = 1;
	StrFonts = FONTS+"pt Calibri ";
	_self.StockType = 1;//0-指数，1-个股,2-其他指数，不需要画均价线 
	var MarketType = 0;//市场类型，0：a股1：港股
	var FullTime = false;
	var HasVolume = true;
	var ClickProcessFunc = null;//点击处理函数，回调函数
	this.setClientRect = function(cw,ch)
	{
		
		ClientWidth  = cw;
		ClientHeight = ch;
		
		initalize();
		
	}
	
	//初始化
	var initalize = function ()
	{
		Tag_Border_Width = FONTS * 7;
		LineWidth = ClientWidth  - Tag_Border_Width;
		if (HasVolume)
		{
			LineHeight = parseInt(ClientHeight*2/3, 10);
			VolumeHeight = ClientHeight - LineHeight - TIME_TAG_HEIGHT;
			}else{
			LineHeight = parseInt(ClientHeight- TIME_TAG_HEIGHT, 10);
			VolumeHeight =0;// ClientHeight - LineHeight - TIME_TAG_HEIGHT;
		}
		VolumeWidth = ClientWidth - Tag_Border_Width;
	}
	
	this.init = function()
	{
			initalize();
	}
	
	this.setHasVolume = function(args)
	{
			HasVolume = args;
	}
		this.setClickProcessFunc = function(args)
	{
			ClickProcessFunc = args;
	}
	this.setSelectXY=function(x,y)
	{
		
		if (x < Tag_Border_Width)
			return;
		if ((y >LineHeight )&&(y < (LineHeight + TIME_TAG_HEIGHT)))
		{
				return;
		}
		var diffx = Math.abs(SelectX-x);
	
		if ((diffx < 20))
		{
			Selected =!Selected;
		}else{
			Selected=true;		
		}
		SelectX = x;
		SelectY =y;	
		
	}
	
	
	this.setDecimalPlace=function(decimal_place)
	{
			DecimalPlace = decimal_place;
	}
	
	this.setPreClose = function(p)
	{
			PreClose = isNaN(p)?0:p;
			
	}
	
	this.setOpen = function(p)
	{
			Open = isNaN(p)?0:p;
	}
	//设置数据
	//type:0-a股 1-港股
	
	this.setData = function(datalist,type)
	{
		
			var i = 0;
			var totala = 0.0;
			var totalv = 0.0;
			MarketType = type== undefined? 0:type;
			if (type ==1)
			{
				DataList = new Array(330);
			}else 
			{
				DataList = new Array(240);
			}
			while(datalist.length > 0)
			{
					var info = datalist.shift();
					DataList[i] = info;
					totala += DataList[i].Amount;
					totalv += DataList[i].Volume;
//					DataList[i].AveragePrice = totala / totalv;
					i++;
			}
			
	}
	
	//计算各种最大小值
	var calculateMax = function()
	{
	
		MaxPrice = 0;
		MinPrice = 1000000;
		var def = DecimalPlace == 2? 0.04 : DecimalPlace == 3?0.004:DecimalPlace == 4? 0.0004:0.4;
		var step = DecimalPlace == 2? 0.01 : DecimalPlace == 3?0.001:DecimalPlace == 4? 0.0001:0.1;
		if (DataList[0] == null)
		{
				MaxPrice =  PreClose +  def / 2;
				MinPrice = PreClose - def / 2;
				MaxCord = MaxPrice;
				Tag_Border_Width = Math.max(Context.measureText(formatNumber(MaxPrice,DecimalPlace)).width ,Context.measureText(getMoneyNumber(MaxVolume,0)).width);
				Tag_Border_Width+= TAG_BORDER_SPACE;
				LineWidth = ClientWidth  - Tag_Border_Width;
				VolumeWidth = ClientWidth - Tag_Border_Width;
				return;

		}
		for(var i = 0; i <DataList.length; i++)
		{
			
			if ((DataList[i] != null) &&(DataList[i] instanceof TimeLineInfo))
			{
				//MaxPrice = MaxPrice >= DataList[i].Price ? MaxPrice : DataList[i].Price;
				//MinPrice = MinPrice == 0? DataList[i].Price :(MinPrice <= DataList[i].Price ? MinPrice : DataList[i].Price);
				MaxPrice =   Math.max(MaxPrice, DataList[i].Price);
				MinPrice = Math.min(MinPrice, DataList[i].Price);
				if (_self.StockType < 2)
				{
					//计算需要画均线的最大/小价格
					MaxPrice =   Math.max(MaxPrice, DataList[i].AveragePrice);
					MinPrice = Math.min(MinPrice, DataList[i].AveragePrice);
				}
				MaxVolume = MaxVolume >= DataList[i].Volume? MaxVolume : DataList[i].Volume;
				
			}
		}
		
		while ((MaxPrice - MinPrice) < def)
		{
			//对于差值过小的时候，人为增加坐标区间，防止出现一个价格出现在两个标值上
			MaxPrice +=step;
			MinPrice -= step;
			if (MinPrice < step)
			{
				//防止出现0的价格
				MinPrice = step;
			}
		}
		PreClose = PreClose == 0?(MaxPrice + MinPrice) / 2 :PreClose;
		MaxCord = Math.max(Math.abs(MaxPrice - PreClose), Math.abs(MinPrice - PreClose)) + PreClose;
		Context.font = StrFonts;
		Tag_Border_Width = Math.max(Context.measureText(formatNumber(MaxPrice,DecimalPlace)).width ,Context.measureText(getMoneyNumber(MaxVolume,0)).width);
		Tag_Border_Width = Math.max(Tag_Border_Width, Context.measureText(getMoneyNumber(MaxVolume / 2,0)).width);
		Tag_Border_Width += TAG_BORDER_SPACE;

		LineWidth = ClientWidth  - Tag_Border_Width;
		VolumeWidth = ClientWidth - Tag_Border_Width;
	}
	
	//画分时线
	var drawTimeLine = function(graphHeight)
	{
		if (DataList[0] == null)
			return;
		var linewidth = LineWidth / DataList.length;
		Context.save();
		Context.beginPath();
		Context.strokeStyle =COLOR_LINE;
		Context.lineJoin="miter ";
		var x = Tag_Border_Width; 
		var y = (MaxCord - DataList[0].Price) * graphHeight / (2* (MaxCord - PreClose));
		Context.moveTo(x,y);

		for(var i = 1; i <DataList.length; i++)
		{
			if ((DataList[i] != null) &&(DataList[i] instanceof TimeLineInfo))
			{
				x =(i * linewidth + Tag_Border_Width);
				y = (MaxCord - DataList[i].Price) * graphHeight / (2* (MaxCord - PreClose));
				Context.lineTo(x, y);
			}
		}
		Context.stroke();
		Context.closePath();
		Context.restore();
	}
	
	
		//画分时均价线
	var drawAverageTimeLine = function(graphHeight)
	{
		var linewidth = LineWidth / DataList.length;
		Context.save();
		Context.beginPath();
		Context.strokeStyle =COLOR_AVERAGE_LINE;
		Context.lineJoin="miter ";
		var x = Tag_Border_Width; 
		var y = (MaxCord - DataList[0].AveragePrice) * graphHeight / (2* (MaxCord - PreClose));
		Context.moveTo(x,y)
		for(var i = 1; i <DataList.length; i++)
		{
			if ((DataList[i] != null) &&(DataList[i] instanceof TimeLineInfo))
			{
				x = i * linewidth + Tag_Border_Width;
				y = (MaxCord - round(DataList[i].AveragePrice,DecimalPlace)) * graphHeight / (2* (MaxCord - PreClose));
				Context.lineTo(x, y);
			}
		}
		Context.stroke();
		Context.closePath();
		Context.restore();
	}
	
	
	//画成交量
	var drawVolume = function (graphHeight)
	{
		var linewidth = LineWidth / DataList.length;
		linewidth = linewidth <1?1:linewidth;
		if ((linewidth - VolumeSplite) <=0)
		{
			VolumeSplite = 0;
		}
		
		VolumeSplite = 0;
		Context.save();
		Context.fillStyle=COLOR_VOLUME;
	
		for(var i = 0; i < DataList.length; i++)
		{
			if ((DataList[i] != null) &&(DataList[i] instanceof TimeLineInfo))
			{
				if (i == 0)
				{
						Context.fillStyle = DataList[i].Price > PreClose? COLOR_RISE :DataList[i].Price < PreClose ? COLOR_DOWN:COLOR_SAME;
				}else{
					Context.fillStyle = DataList[i].Price > DataList[i - 1].Price? COLOR_RISE :DataList[i].Price < DataList[i - 1].Price ? COLOR_DOWN:COLOR_SAME;
			}
				var x = i * linewidth + Tag_Border_Width;
				var y = (MaxVolume - DataList[i].Volume) * graphHeight / MaxVolume + LineHeight + TIME_TAG_HEIGHT;
				var h = DataList[i].Volume * graphHeight / MaxVolume;
		
			
				Context.fillRect(x, y, linewidth - VolumeSplite, h);
			}
		}
		Context.restore();
	}
	
	//画框和标线
	var drawTimeLineBorder = function ()
	{
			Context.save();
			Context.strokeStyle=COLOR_BORDER;
			//主图标线
			Context.strokeRect(Tag_Border_Width, 0, LineWidth, LineHeight);
		
			if (HasVolume)
			{
				//Context.strokeRect(Tag_Border_Width, LineHeight,LineWidth, TIME_TAG_HEIGHT);
				Context.strokeRect(Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT,LineWidth, VolumeHeight);
				
			}
			if (MarketType == 1)
			{
				//港股9：30-12：00， 13：00-16：00
				Context.beginPath();
				Context.moveTo(LineWidth *2.5/5.5 + Tag_Border_Width, 0);
				Context.lineTo(LineWidth *2.5/5.5 + Tag_Border_Width, LineHeight);
	
				Context.moveTo(LineWidth *2.5/(5.5*2) + Tag_Border_Width, 0);
				Context.lineTo(LineWidth *2.5/(5.5*2) + Tag_Border_Width, LineHeight);
	
				Context.moveTo(LineWidth - LineWidth *3 / (5.5*2) + Tag_Border_Width, 0);
				Context.lineTo(LineWidth - LineWidth *3/(5.5*2)  + Tag_Border_Width, LineHeight);
		
				Context.moveTo( Tag_Border_Width, LineHeight / 2);
				Context.lineTo(LineWidth  + Tag_Border_Width, LineHeight /2 );
	
				Context.moveTo( Tag_Border_Width, LineHeight / 4);
				Context.lineTo(LineWidth  + Tag_Border_Width, LineHeight /4 );
	
				Context.moveTo( Tag_Border_Width , LineHeight *3 / 4);
				Context.lineTo(LineWidth  + Tag_Border_Width, LineHeight *3 /4 );
				
				
								//成交量标线
			
					Context.moveTo(VolumeWidth *2.5/5.5  + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT);
					Context.lineTo(VolumeWidth *2.5/5.5  + Tag_Border_Width, LineHeight+ TIME_TAG_HEIGHT + VolumeHeight);
		
					Context.moveTo(VolumeWidth *2.5/(5.5*2) + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT);
					Context.lineTo(VolumeWidth *2.5/(5.5*2) + Tag_Border_Width, LineHeight+ TIME_TAG_HEIGHT + VolumeHeight);
		
					Context.moveTo(VolumeWidth - VolumeWidth *3 / (5.5*2) + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT);
					Context.lineTo(VolumeWidth - VolumeWidth *3 / (5.5*2)+ Tag_Border_Width, LineHeight+ TIME_TAG_HEIGHT + VolumeHeight);
				
			}
			else
			{
				//a股 9:30-11:30, 13:00-15:00
				Context.beginPath();
				Context.moveTo(LineWidth / 2 + Tag_Border_Width, 0);
				Context.lineTo(LineWidth / 2 + Tag_Border_Width, LineHeight);
	
				Context.moveTo(LineWidth / 4 + Tag_Border_Width, 0);
				Context.lineTo(LineWidth / 4 + Tag_Border_Width, LineHeight);
	
				Context.moveTo(LineWidth *3 / 4 + Tag_Border_Width, 0);
				Context.lineTo(LineWidth *3/ 4 + Tag_Border_Width, LineHeight);
		
				Context.moveTo( Tag_Border_Width, LineHeight / 2);
				Context.lineTo(LineWidth  + Tag_Border_Width, LineHeight /2 );
	
				Context.moveTo( Tag_Border_Width, LineHeight / 4);
				Context.lineTo(LineWidth  + Tag_Border_Width, LineHeight /4 );
	
				Context.moveTo( Tag_Border_Width , LineHeight *3 / 4);
				Context.lineTo(LineWidth  + Tag_Border_Width, LineHeight *3 /4 );
				
				
			
				
				//成交量标线
				
					Context.moveTo(VolumeWidth / 2 + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT);
					Context.lineTo(VolumeWidth / 2 + Tag_Border_Width, LineHeight+ TIME_TAG_HEIGHT + VolumeHeight);
		
					Context.moveTo(VolumeWidth / 4 + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT);
					Context.lineTo(VolumeWidth / 4 + Tag_Border_Width, LineHeight+ TIME_TAG_HEIGHT + VolumeHeight);
		
					Context.moveTo(VolumeWidth *3 / 4 + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT);
					Context.lineTo(VolumeWidth *3/ 4 + Tag_Border_Width, LineHeight+ TIME_TAG_HEIGHT + VolumeHeight);
				
			}
			//成交量标线
				if (HasVolume)
				{
					Context.moveTo( Tag_Border_Width , LineHeight + TIME_TAG_HEIGHT + VolumeHeight/2);
					Context.lineTo(VolumeWidth  + Tag_Border_Width, LineHeight + TIME_TAG_HEIGHT + VolumeHeight/2 );
				}
			
			
			Context.stroke();
			Context.closePath();
			Context.restore();
	}
	
	
	//画标线数值
	var drawBorderValue = function()
	{
			Context.save();
			Context.font = StrFonts;
			Context.textBaseline = 'top';
			Context.textAlign = 'right';
			
			Context.fillStyle=COLOR_SAME;
			Context.fillText(formatNumber(round(MaxCord, DecimalPlace),DecimalPlace), Tag_Border_Width - TAG_BORDER_SPACE, 0);
			Context.textBaseline = 'middle';
			Context.fillText(formatNumber(round(PreClose,DecimalPlace),DecimalPlace), Tag_Border_Width - TAG_BORDER_SPACE, LineHeight / 2);
			Context.fillText(formatNumber(round((MaxCord - PreClose) /2 + PreClose, DecimalPlace), DecimalPlace), Tag_Border_Width - TAG_BORDER_SPACE, LineHeight / 4);
			
			Context.fillText(formatNumber(round(PreClose - (MaxCord - PreClose)/2, DecimalPlace),DecimalPlace) , Tag_Border_Width - TAG_BORDER_SPACE, LineHeight*3 / 4);
			Context.textBaseline = 'bottom';
			Context.fillText(formatNumber(round(PreClose - (MaxCord - PreClose),DecimalPlace),DecimalPlace)  , Tag_Border_Width - TAG_BORDER_SPACE, LineHeight);
			//成交量坐标
			if (HasVolume)
			{
				Context.textBaseline = 'top';
				Context.fillText(getMoneyNumber(MaxVolume,0) , Tag_Border_Width - TAG_BORDER_SPACE, LineHeight + TIME_TAG_HEIGHT);
				//判断是否可以显示第二个数值，不能显示则不显示，地方太小，避免数值重叠
				//判断第二行字头会不会和第一行重叠
				Context.textBaseline = 'middle';
				if ((LineHeight + TIME_TAG_HEIGHT + FONTS) < (LineHeight + TIME_TAG_HEIGHT + VolumeHeight / 2 - FONTS/2))
				{
					Context.fillText(getMoneyNumber(MaxVolume/2,0) , Tag_Border_Width - TAG_BORDER_SPACE, LineHeight + TIME_TAG_HEIGHT + VolumeHeight / 2);
				}
				
				Context.textBaseline = 'bottom';
				Context.fillText("0" , Tag_Border_Width - TAG_BORDER_SPACE, LineHeight + TIME_TAG_HEIGHT +VolumeHeight);
			}
			
			Context.restore();
	}
	
	
	//画时间
	var drawTime = function()
	{
			var timelength = 0;
			Context.save();
			Context.font = StrFonts;
			Context.textBaseline = 'top';
			Context.textAlign = 'left';
			Context.fillStyle=COLOR_SAME;
			if (MarketType == 0)
			{
				Context.fillText("09:30", Tag_Border_Width, LineHeight);
				Context.textAlign = 'center';
				Context.fillText("13:00", Tag_Border_Width + LineWidth /2, LineHeight);
				//判断是否够宽可以显示下所有时间轴坐标，不够的话，不显示中间2根坐标
				timelength=Context.measureText("09:30  10:30  13:00  14:00  15:00").width;
				if (LineWidth > timelength)
				{
					Context.fillText("10:30", Tag_Border_Width + LineWidth /4, LineHeight);
					Context.fillText("14:00", Tag_Border_Width + LineWidth *3/4, LineHeight);
				}
				Context.textAlign = 'right';
				Context.fillText("15:00", Tag_Border_Width + LineWidth , LineHeight );
			}else if (MarketType == 1)
			{
				Context.fillText("09:30", Tag_Border_Width, LineHeight);
				Context.textAlign = 'center';
				Context.fillText("13:00", Tag_Border_Width + LineWidth*2.5/5.5, LineHeight);
				//判断是否够宽可以显示下所有时间轴坐标，不够的话，不显示中间2根坐标
				timelength=Context.measureText("09:30  10:45  13:00  14:30  16:00").width;
				if (LineWidth > timelength)
				{
					Context.fillText("10:45", Tag_Border_Width + LineWidth*2.5/(5.5*2), LineHeight);
					Context.fillText("14:30", Tag_Border_Width + LineWidth - LineWidth *3/(5.5*2)  , LineHeight);
				}
				Context.textAlign = 'right';
				Context.fillText("16:00", Tag_Border_Width + LineWidth , LineHeight );
			}
			Context.restore();
	}
	
	//画十字线
	var drawCrossorLine=function(x,y)
	{
			Context.save();
			Context.strokeStyle=COLOR_CROSSOR_LINE;
			Context.beginPath();
			Context.moveTo(x,0);
			Context.lineTo(x,  LineHeight);
			Context.moveTo(x, LineHeight + TIME_TAG_HEIGHT );
			Context.lineTo(x,  ClientHeight);
	
			Context.moveTo(Tag_Border_Width,y);
			Context.lineTo(ClientWidth,y);
	
			Context.stroke();
			Context.closePath();
			Context.restore();
	}

	//画选择时点信息
	var drawSelect = function()
	{
		var selectid =  parseInt(getSelectIndex(SelectX));
		if (ClickProcessFunc != null)
			{
				var info = DataList[selectid];
				if (info != null)
				{
					ClickProcessFunc(info.Price, info.AveragePrice, info.RiseRate);
				}
			}else
			{
				drawCrossorLine(SelectX, SelectY)
				drawInfoTagBorder(SelectX, SelectY, selectid);
			}					
		
	}

var getSelectIndex=function(x)
	{
		var realx = x - Tag_Border_Width;
		var width= ClientWidth - Tag_Border_Width;
			if (realx >= width)
			{
					realx =  width;
			}
			var selectid =realx * DataList.length / width;
			return selectid = selectid >= DataList.length?DataList.length - 1:selectid;
	}
	//十字星显示框
	var drawInfoTagBorder = function(x,y, index)
	{
			var l = 0,t = 0;
			var w = MIN_INFO_WIDTH, h = MIN_INFO_HEIGHT;
			Context.font = StrFonts;
			var info = DataList[index];
			w = Context.measureText(TIMELINE_STRING[0]).width + Math.max(Math.max(Math.max(Context.measureText(formatNumber(info == null?0:info.Price,DecimalPlace)).width, 
			Context.measureText(formatNumber(info == null?0:info.Volume,0)).width),
			Context.measureText(formatNumber(info == null?0:info.RiseRate,2) + "%").width),
			Context.measureText(formatNumber(Open,DecimalPlace)).width);
			
			w = w < MIN_INFO_WIDTH? MIN_INFO_WIDTH :w;
			w+=2;
			h = FONTS*6*1.5;
			h = h < MIN_INFO_HEIGHT? MIN_INFO_HEIGHT:h;
			var linescreenwidth = ClientWidth - Tag_Border_Width;
			if ((x ) < (linescreenwidth / 2 + Tag_Border_Width))
			{
				l = linescreenwidth / 2 + Tag_Border_Width;
			}
			Context.save();
			Context.beginPath();
			Context.strockStyle=COLOR_CROSSOR_LINE;
			Context.strokeRect(l, t,  w, h);
			Context.fillStyle=COLOR_BACKGROUND;
			Context.fillRect(l, t,  w, h);
		
			Context.closePath();
			Context.restore();
			drawInfo(l,t,index);
	}
	
	//画点击以后显示的详细信息
	var drawInfo = function(x,y, index)
	{
		var xspace = Context.measureText(TIMELINE_STRING[0]).width+ 2;
		Context.save();
		Context.font = StrFonts;
		index = index >= DataList.length ? DataList.length - 1:index ;
		index = index < 0 ? 0 : index;
	
		Context.textBaseline = 'top';
		Context.fillStyle=COLOR_SAME;
		var info;
		if (DataList[index] != null)
		{
			info = DataList[index];
		}else{
			info = new TimeLineInfo();
			if (MarketType == 0)
			{
				info.DateTime = getTimeFromIndex(index);
			}else if (MarketType == 1)
			{
				info.DateTime = getHKTimeFromIndex(index);
			}
			
		}
//		Context.fillText("" , x, y );
		Context.fillText(info.DateTime, x + xspace, y );

		y+=FONTS*1.5;
		Context.fillStyle=COLOR_SAME;
		Context.fillText(TIMELINE_STRING[0] ,x,y);
		Context.fillStyle=info.Price > PreClose ? COLOR_RISE: 
									info.Price < PreClose? COLOR_DOWN:COLOR_SAME;
		Context.fillText(formatNumber(info.Price,DecimalPlace), x + xspace, y  );

		y+=FONTS*1.5;
		Context.fillStyle=COLOR_SAME;
		Context.fillText(TIMELINE_STRING[1] , x, y  );
		Context.fillStyle=Open > PreClose ? COLOR_RISE: 
									Open < PreClose? COLOR_DOWN:COLOR_SAME;
		Context.fillText( formatNumber(Open,DecimalPlace), x + xspace, y  );
		
		y+=FONTS*1.5;
		if (_self.StockType == 0)
		{
			Context.fillStyle=COLOR_SAME;
				Context.fillText(TIMELINE_STRING[2], x, y);
				Context.fillStyle=info.AveragePrice > PreClose ? COLOR_RISE: 
									info.AveragePrice < PreClose? COLOR_DOWN:COLOR_SAME;
				Context.fillText( formatNumber(info.AveragePrice,DecimalPlace), x+xspace, y);
		}else if (_self.StockType == 1){
			Context.fillStyle=COLOR_SAME;
			Context.fillText(TIMELINE_STRING[3] , x, y);
			Context.fillStyle=info.AveragePrice > PreClose ? COLOR_RISE: 
									info.AveragePrice < PreClose? COLOR_DOWN:COLOR_SAME;
			Context.fillText( formatNumber(info.AveragePrice,DecimalPlace), x+xspace, y);
		}else{
			Context.fillStyle=COLOR_SAME;
			Context.fillText(TIMELINE_STRING[3]+"-",  x, y);
		}
		y+=FONTS*1.5;
			Context.fillStyle=COLOR_SAME;
		Context.fillText(TIMELINE_STRING[4] , x, y);
		Context.fillStyle=info.Price > PreClose ? COLOR_RISE: 
									info.Price < PreClose? COLOR_DOWN:COLOR_SAME;
		Context.fillText( formatNumber(isNaN(info.RiseRate)?0:info.RiseRate,2) + "%", x+xspace, y);

		y+=FONTS*1.5;
		Context.fillStyle=COLOR_SAME;
		Context.fillText(TIMELINE_STRING[5] , x, y);
		Context.fillText( getVolumeNumber(info.Volume,0) , x+xspace, y);
		Context.restore();
	}
	
	this.draw = function()
	{
		Context.clearRect(0,0,ClientWidth,ClientHeight);
		calculateMax();
		drawTimeLineBorder();
		drawBorderValue();

		if (this.Status != 1)
		{
			return;
		}
		if (DataList[0] == null)
		return;
		drawTime();
		drawTimeLine(LineHeight);
		if (_self.StockType < 2)
		{
			drawAverageTimeLine(LineHeight);
		}
	if (HasVolume)
		{
			drawVolume(VolumeHeight);
		}
		if (Selected)
		{
				drawSelect();
		}
	}
	
	
	this.setFonts=function(newFont)
	{
		FONTS = newFont;

		StrFonts = FONTS+"pt Calibri";
		Tag_Border_Width = FONTS* 8*2/3;
	}	
}